<template class="dh animate__animated animate__slideInLeft">
  <view >
    <van-nav-bar title="整租发布" left-arrow @click-left="goBack" />
    <div class="banner">
      <p class="title">轻轻松松上架房源</p>
      <p class="subtitle">实名认证→发布房源→真房认证→平台</p>
    </div>

    <!-- 房源基础信息 -->
    <van-cell-group title="房源基础信息" class="xinxi">
      <van-field v-model="city" label="所在城市" readonly @click="goToCitySelect" />
      <van-field v-model="address" label="小区名称地址" placeholder="请输入" required />
      <van-field v-model="area" label="整套面积" type="number" right-icon="楼层" placeholder="平方米" required />
      <van-field v-model="floor" label="楼层|总楼层" placeholder="请输入" required />
      <van-field v-model="layout" label="户型" placeholder="请输入" required />
    </van-cell-group>

    <hr />

    <!-- 房源设施 -->
    <van-cell-group title="房源设施">
      <van-tag v-for="(item, index) in facilities" :key="index" :class="{ active: selectedFacilities.includes(item) }"
        size="large" @click="toggleFacility(item)">
        {{ item }}
      </van-tag>
    </van-cell-group>

    <br />
    <hr />

    <!-- 分房信息，改为上传图片功能 -->
    <van-cell-group title="房间图片上传">
      <van-uploader v-model:files="roomImages" :after-read="handleAfterRead" :max-count="9" :preview-size="80"
        :preview-teleport="parentNode" />
      <div class="image-preview-container">
        <van-image v-for="(image, index) in roomImages" :key="index" :src="image.url" class="preview-image"
          @click="previewImage(index)" />
      </div>
    </van-cell-group>
    <br />
    <hr />
    <van-cell-group title="查看房源">
      <van-field label="看房时间" v-model="viewingTime" placeholder="请选择看房时间" required @click="showCalendar" />
      <div class="radio-wrapper">
        <span class="radio-label">&nbsp&nbsp&nbsp*预约看房&nbsp&nbsp</span>
        <van-radio-group v-model="isViewAvailable" class="radio-group">
          <van-radio label="可以预约" value="yes">可以预约&nbsp&nbsp&nbsp&nbsp&nbsp</van-radio>
          <van-radio label="不可预约" value="no">不可预约</van-radio>
        </van-radio-group>
      </div>
      <van-field label="*入驻要求" v-model="moveInRequirements" placeholder="请输入" />
    </van-cell-group>
    <van-calendar v-model:show="show" :show-confirm="false" @confirm="onConfirm" />
    <hr />
    <br>
    <div class="xieyi">
      <van-checkbox v-model="acceptTerms" label="我承诺房源真实并同意《个人用户房源服务协议》" />
      我承诺房源真实并同意《个人用户房源服务协议》
    </div>
    <br>
    <br>
    <br>
    <br>
    <van-button type="info" size="large" block @click="goToHome">免费发布</van-button>
    <van-image-preview v-model:show="imagePreviewShow" :images="imagePreviewList" />
  </view>
</template>
<script setup>
import { ref, getCurrentInstance, watchEffect } from 'vue';
import 'animate.css';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const city = ref('深圳');
const address = ref('福岗园大厦');
const area = ref('58');
const floor = ref('3层|共20层');
const layout = ref('2室1厅1卫');
const moveInRequirements = ref('');
const acceptTerms = ref(false);

const facilities = ref([
  '冰箱', '洗衣机', '热水器', '宽带', '沙发', '可做饭', '油烟机', '燃气灶', '电磁炉', '壁炉', '橱柜', '餐桌', '电视', '空调', '衣柜', '床', '卫生间', '智能门锁', '阳台', '暖气', '前台'
]);
const selectedFacilities = ref([]);

const roomImages = ref([]);
const viewingTime = ref('');
const isViewAvailable = ref('yes');
const show = ref(false);
const { proxy } = getCurrentInstance();
const parentNode = proxy.$el;

const imagePreviewShow = ref(false);
const imagePreviewList = ref([]);

const showCalendar = () => {
  show.value = true;
};

const onConfirm = (date) => {
  viewingTime.value = date.toLocaleDateString();
  show.value = false;
};

const toggleFacility = (item) => {
  const index = selectedFacilities.value.indexOf(item);
  if (index > -1) {
    selectedFacilities.value.splice(index, 1);
  } else {
    selectedFacilities.value.push(item);
  }
};

const handleAfterRead = (file) => {
  if (roomImages.value.length < 9) {
    roomImages.value.push(file);
  }
};

const previewImage = (index) => {
  imagePreviewList.value = roomImages.value.map((image) => image.url);
  imagePreviewShow.value = true;
};

const goBack = () => {
  router.back();
};

const goToHome = () => {
  router.push('/home');
};

const goToCitySelect = () => {
  router.push('/cityelect');
};

// 监听路由变化，回填城市信息
watchEffect(() => {
  const selectedCity = route.state?.selectedCity;
  console.log('route.state.selectedCity:', selectedCity); // 添加调试语句
  if (selectedCity) {
    city.value = selectedCity;
  }
});
// watchEffect(() => {
//     const selectedCity = route.query.selectedCity; // 从query中获取数据
//     console.log('route.query.selectedCity:', selectedCity); 
//     if (selectedCity) {
//         city.value = selectedCity;
//     }
// });
</script>
<style scoped>
.banner {
  background: #e0eff6;
  padding: 15px;
  text-align: left;
}

.title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.xinxi {
  background-color: #888;
}

.van-tag {
  border: 1px solid #ff8c00;
  color: #ff8c00;
  background: white;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 14px;
}

.van-tag.active {
  background: #ff8c00;
  color: white;
}

.van-button {
  background-color: #f56c6c;
  border-radius: 8px;
  padding: 10px;
}

.sub-title {
  font-size: 12px;
  color: #888;
  padding-left: 15px;
}

.xieyi {
  font-size: 16px;
  float: right;
  align-items: center;
}

.radio-container {
  display: flex;
  align-items: center;
}

.radio-container van-radio-group {
  margin-left: 15px;
}

.radio-wrapper {
  display: flex;
  align-items: center;
}

.radio-label {
  margin-right: 10px;
}

.radio-group {
  display: flex;
  align-items: center;
}

.radio-group van-radio {
  margin-right: 15px;
}

.image-preview-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.preview-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>